<template>
  <el-config-provider
    :locale="locale"
    :size="config.size"
    :zIndex="config.zIndex"
    :button="config.button"
  >
    <router-view></router-view>
  </el-config-provider>
</template>

<script>
import colorTool from '@/utils/color'

export default {
  name: 'App',
  data () {
    return {
      config: {
        size: "default",
        zIndex: 2000,
        button: {
          autoInsertSpace: false
        }
      },
      webData: {}
    }
  },
  computed: {
    locale () {
      return this.$i18n.messages[this.$i18n.locale].el
    },
  },
  beforeMount () {
    // this.getSystemData()
  },
  created () {
    //设置主题颜色
    const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
    if (app_color) {
      document.documentElement.style.setProperty('--el-color-primary', app_color)
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color, i / 10))
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color, i / 10))
      }
    }
  },

  methods: {
    // 获取系统配置数据
    async getSystemData () {
      let { data } = await this.$API.auth.system.getSystemData.get()
      let list = data
      let obj = {}
      list.map(item => {
        switch (item.field) {
          case 'web_title':
            obj.title = item.value
            break
          case 'web_logo':
            obj.logo = item.value
            break
        }
      })
      this.webData = obj
      window.document.title = this.webData.title
    }
  }
}
</script>

<style lang="scss">
@import "@/style/style.scss";
.el-form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-form-item {
    // margin-right: 30px;
    width: 48%;
  }
  .el-form-item__content {
    align-items: flex-start;
  }
}

.noFlex {
  display: block !important;
  .el-form-item {
    width: 100%;
  }
}

.cellClass {
  cursor: pointer;
}

.msgBox {
  width: 480px;
}

.click {
  cursor: pointer;
}
</style>
